vue 组件通讯

一、父子关系的组件通讯

1.1 组件数据父传子

父在使用子组件的时候，通过 v-bind 的形式给子组件传递数据，子组件通过 props 数组项接收，名称要对应。

具体代码如下

父组件 father.vue

<template>
    <div id='father'>
        <p>这是父组件</p>
        <Son v-bind:fs="fatherMsg"></Son>
    </div>
</template>

<script>
    import Son from './son'
    export default {
        data() {
            return {
                fatherMsg: '来自父组件的消息'
            }
        },
        components: {
            'Son':Son
        }
    }
</script>

<style scoped>
</style>

子组件 son.vue

<template>
    <div id='son'>
        <p>这是子组件</p>
        <span>{{ fs }}</span>
    </div>
</template>

<script>
    export default {
        props: ['fs']
    }
</script>

<style scoped>
</style>

页面显示效果

一图简化版

1.2 组件数据子传父

子组件可以用 this.$emit(eventName, data) 来发射事件，第二个参数就是要传递的数据，接着父组件可以在引入子组件的标签通过 v-on:eventName=”事件回调” 来触发对应的事件，然后在这个触发的事件函数里，它的参数就是子组件传递过来的数据。

子组件 son.vue

<template>
    <div id='son'>
        <p>这是子组件</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sonMsg: '来自子组件的消息'
            }
        },
        created() {
            this.$emit('send', this.sonMsg);
        }
    }
</script>

<style scoped>
</style>

父组件 father.vue

<template>
    <div id='father'>
        <p>这是父组件</p>
        <span>{{ sonMsg }}</span>
        <Son v-on:send='sendFn'></Son>
    </div>
</template>

<script>
    import Son from './son'
    export default {
        data() {
            return {
                sonMsg: ''
            }
        },
        methods: {
            sendFn(data) {
                this.sonMsg = data;
            }
        },
        components: {
            'Son':Son
        }
    }
</script>

<style scoped>
</style>

页面显示效果

二、非父子关系的组件通讯

可以使用一个空的 vue 实例作为一个事件中心，相当于中转站 eventBus。然后在组件 A 可以使用实例点 $emit 来发送事件，第一个参数就是事件名，第二个参数就是要传递的数据。
然后在组件 B 就可以使用 $on 来接收数据，第一个参数就是对应的事件名，第二个参数就是一个回调，在回调里面就可以拿到数据了。

eventBus.js

import Vue from 'Vue'
export default new Vue();

A.vue

<template>
    <div>
        <p>这是 A 组件</p>
        <button @click='send'>click</button>
    </div>
</template>

<script>
    import EventBus from './eventBus.js'
    export default {
        methods: {
            send() {
                EventBus.$emit('send','A 组件发送的数据')
            }
        }
    }
</script>

<style scoped>
</style>

B.vue

<template>
    <div>
        <p>这是 B 组件</p>
    </div>
</template>

<script>
    import EventBus from './eventBus.js'
    export default {
        created() {
            EventBus.$on('send', data => {
                console.log(data); // A 组件发送的数据
            })
        }
    }
</script>

<style scoped>
</style>

event bus 只适于某些不复杂的场景，在需要频繁进行组件通信的情况下，还是应该尽量使用 Vuex ，不仅使用上更加简单，同时数据流的流向也会相对清晰。

不建议使用大量 event bus，当组件结构复杂的时候,并不容易知道 event bus 是从哪里传过来的;而且发送的事件名称在 event bus 中类似于一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.